<div id="capaPopUp"></div>
<div id="popUpDiv">
    <div id="capaPng">
		<div id="cerrar">X</div>
        <div id = "capaContent">
			<h2>Tus Amigos:</h2>
            <% form_tag (:controller => "user_trips", :action => "create", :method => "post") do%>
				<input type="hidden" name="trip_id" value ="<%= @trip.id %>" >
				<div id = "personas">
					 <%= select_tag "user_id", options_from_collection_for_select(@friend_uninvited, :id, :name) %>
				</div>
				<input type='submit' value='Invitar'>
			<% end %>
        </div>
    </div>
</div>

	 <script type="text/javascript">    
		 jQuery(document).ready(function() {  
			 jQuery('#carousel_adictos').jcarousel();  
		 });  
	 </script>  
	
	<script type="text/javascript">
		$(function() {
			$('#carousel_adictos a').lightBox({
				imageLoading: '/images/loading.gif',
				imageBtnClose: '/images/close.gif',
				imageBtnPrev: '/images/prev.gif',
				imageBtnNext: '/images/next.gif'
			});
		});

		$(function() {
			$( "button, input:submit, a", ".demo" ).button();
			$( "a", ".demo" ).click(function() { return true; });
		});
    </script>

	 <style type="text/css">
		/* jQuery lightBox plugin - Gallery style */
		#gallery {
			background-color: #444;
			padding: 10px;
			width: 520px;
		}
		#gallery ul { list-style: none; }
		#gallery ul li { display: inline; }
		#gallery ul img {
			border: 5px solid #3e3e3e;
			border-width: 5px 5px 20px;
		}
		#gallery ul a:hover img {
			border: 5px solid #fff;
			border-width: 5px 5px 20px;
			color: #fff;
		}
		#gallery ul a:hover { color: #fff; }
	</style>
	
	<style type="text/css">
		#datos{
			-moz-border-radius: 10px 10px 10px 10px;
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #99CC00;
			width: 30%;
			weight: 30%
		}
	</style>

	<div id="datos" style=" float:left; margin-left: 20; text-align: center;">
	<h1>Datos del Viaje</h1>
		<p>
		  <b>Destino:</b>
		  <%=h @trip.tri_country %> - <%=h @trip.tri_city %>
		</p>
		<p>
		  <b>Fecha Salida:</b>
		  <%=h @trip.tri_start_date.strftime("%d-%m-%Y") %>
		</p>
		<p>
		  <b>Fecha Regreso:</b>
		  <%=h @trip.tri_end_date.strftime("%d-%m-%Y") %>
		</p>
		<p>
		  <b>Tipo de Viaje:</b>
		  <% if @trip.tri_shared == 0 %>
			Privado
		  <% else%>
			Publico
		  <% end-%>
		</p>
		<p>
		  <b>Lugar de Hospedaje:</b>
		  <%=h @trip.tri_lodging %>
		</p>
		
		<% if (isOwner(@trip.id)) %>
			<% if (isAvailable(@trip.id)) %>
				<div style="margin-left: 5%; float: left;">
					<%= link_to "Editar Viaje", edit_trip_path(@trip) %>
				</div>
				<div style="margin-left: 70%;">
					<%= link_to "Cerrar Viaje", :controller => "trips", :action => "close_trip", :id => current_user.id %></p>
				</div>
			<% end -%>
		<% end -%>
	</div>
	

	
	<div style="margin-left: 43%;"><h1>Fotos del Viaje</h1></div>
	<div id="carousel_adictos" class="jcarousel-skin-tango" style="margin-left: 33.5%; margin-top: 7.8%;" %>	
	  <ul> 
			<% @all_itineraries.each do |photos|%> 
				<li>
					<a href="<%= photos.iti_image_url %>" title="<%= photos.iti_location %>">
						<img src=" <%= photos.iti_image_url %>" width="75" height="75" alt="" />
					</a>
				</li>
			<% end-%>
		</ul>
	 </div>
 
	<div id="datos" style=" float:rigth; margin-left: 70%; margin-top: -23.7%; height: 228px;">
		<div style="text-align: center;"><h1>Grupo de Viaje</h1></div>
			<div style="margin-left: 10%;">
				<% @user_invited.each do |userTrip|%>
					<% if (userTrip.id == current_user.id) %>
						<li>Tu</li>
					<% else%>
						<li><td><%= link_to (userTrip.name + " " + userTrip.lastname), :controller => "users", :action => "show", :id => userTrip.id %></td></li>
					<% end-%>
				<% end-%>
			</div>
			
		<% if isAvailable(@trip.id) %>
			<% if isOwner(@trip.id) %>
				<div style="text-align: center; margin-top: 41%;">
					<a id = 'abrirPop' href="javascript:void(0);">Invitar Amigos</a>
				</div>
			<% end -%>
		<% end -%>
	</div>

	<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=false" type="text/javascript"></script>
	<div id="map" style="width:400px; height:400px; margin-top: 4%"></div>
	
	<div id="datos" style=" float:left; margin-left: 58%; margin-top: -41%; height: 269px; width:35%;">
		<div style="text-align: center;"><h1>Itinerario(s) del Viaje</h1></div>
		<% i = 0 %>
		<div style="margin-left: 10%;">
		<% @itineraries.each do |itinerary|%>
			<div>		
				<td><%= link_to itinerary.iti_location, :controller => "itineraries", :action => "show", :id => itinerary.id %></td>
				<% if (isOwner(@trip.id)) %>
					<% if (isAvailable(@trip.id)) %>
						<td><%= link_to "Eliminar", itinerary, :method => :delete %></td>
					<% end -%>
				<% end -%>
			</div>
			<input type="hidden" id="latitude<%= i + 1%>" name="latitude<%= i + 1%>" value="<%= itinerary.iti_latitude %>">
			<input type="hidden" id="longitude<%= i + 1%>" name="longitude<%= i + 1%>" value="<%= itinerary.iti_longitude %>">
			<input type="hidden" id="location<%= i + 1%>" name="location<%= i + 1%>" value="<%= itinerary.iti_location %>">
			<% i = i + 1 %>
		<% end -%>
			<input type="hidden" id="trip_count" name="trip_count" value="<%= i %>">
			<input type="hidden" id="tri_country" name="tri_country" value="<%= @trip.tri_country %>">
			<input type="hidden" id="tri_city" name="tri_city" value="<%= @trip.tri_city %>">
		</div>
		<% if isAvailable(@trip.id)%>
			<div style="text-align: center; margin-top: 41%;">		
					<td><%= link_to "Nuevo Itinerario", :controller => "trips", :action => "flickr", :id => @trip.id %></td>
			</div>
		<% end -%>
	</div>

	<% if isAvailable(@trip.id) and isOwner(@trip.id)%>
		<div id="datos" style=" float:left; margin-left: 58%; margin-top: -10%; width:35%;">
			<div style="text-align: center;">
				<h1>Haz Tweet de tu Viaje!</h1>
				<%= tweet_button(:via => "tripbook", :text => "He creado un nuevo viaje en la red social TripBook.", :count => "none", :url => "http://www.google.com") %>
			</div>
		</div>
	<% end -%>
	<div class="demo">
		<% if isAvailable(@trip.id) and isOwner(@trip.id)%>
			<%= link_to "Eliminar Viaje", @trip, :method => :delete %></td>
		<% end -%>
		<%= link_to "Regresar", :controller => "users", :action => "home", :id => current_user.id %>
	</div>

